<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="../../../node_modules/markdown-it/dist/markdown-it.js"></script>
<script src="../../../node_modules/markdown-it-attrs/markdown-it-attrs.browser.js"></script>
<div id="markdownbox"></div>
<script>
  var md = window.markdownit();

  //1. A user may insert rogue attributes like this:
  const text = `![](readme-assets/00.png){onload=fetch('https://i0.hdslb.com/bfs/vc/839af78322450ea0eb6dbb1d19889d831862804f.png').then(()=>console.log('ok'))}`

  md.use(
    window.markdownItAttrs,
    {
      // optional, these are default options
      leftDelimiter: '{',
      rightDelimiter: '}',

      //2. If security is a concern, use an attribute whitelist:
      // allowedAttributes: []  // empty array = all attributes are allowed
      // allowedAttributes: ['id', 'class', /^regex.*$/]
      //Now only id, class and attributes beginning with regex are allowed:
      //text {#red .green regex=allowed onclick=alert('hello')}
      //Output:
      //<p id="red" class="green" regex="allowed">text</p>
    }
  )


  var result = md.render(text);
  /*
    result: <h1 class="green" id="id">header</h1>
    <p with="attrs" and="attrs with space">some text</p>
  */

  console.log('result:',result);
  //<img src="readme-assets/00.png" alt="" onload="fetch('https://i0.hdslb.com/bfs/vc/839af78322450ea0eb6dbb1d19889d831862804f.png').then(()=>console.log('ok'))">

  markdownbox.innerHTML = result;
</script>
</body>
</html>
